<template>
  <div class="ht100">
    <CommonBar
      :options="toolBar.options"
      :rows="toolBar.rows"
      :buttons="toolBar.buttons"
      class="mb20"
    ></CommonBar>
    <div class="main-box">
      <template v-if="apps.length > 0">
        <el-card
          class="card-box"
          v-for="(item, index) in apps"
          :key="index"
        >
          <div
            class="media-box"
            @click="viewDetail(item)"
          >
            <div class="icon-box">
              <i
                :class="item.icon"
                :style="iconStyle(item.iconColor)"
              ></i>
            </div>
            <div class="text-box">
              <div class="text-item">
                <el-tooltip
                  v-if="$store.getters.language === 'en'"
                  effect="dark"
                  :content="item.enName"
                  placement="top-start"
                >
                  <el-link
                    :underline="false"
                    type="primary"
                    class="text-title"
                  >{{ item.enName }}</el-link>
                </el-tooltip>
                <el-tooltip
                  v-else
                  effect="dark"
                  :content="item.chName"
                  placement="top-start"
                >
                  <el-link
                    :underline="false"
                    type="primary"
                    class="text-title"
                  >{{ item.chName }}</el-link>
                </el-tooltip>
                <el-tag
                  :type="appStatus.color[item.status]"
                  size="mini"
                >{{ appStatus.text[item.status] }}</el-tag>
              </div>
              <div class="text-item">
                <span class="item-label">{{ $t('label.version2') }}</span><span>{{ item.version }}</span>
              </div>
              <div class="text-item">
                <span class="item-label">{{ $t('label.category') }}</span>
                <el-tooltip
                  effect="dark"
                  :content="item.type"
                  placement="top-start"
                ><span class="item-content">{{ item.type }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-card>
      </template>
      <el-empty
        v-else
        :description="$t('error.noApp')"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import CommonBar from '../../components/componentCommon/CommonBar.vue';
import { getCategorys, getApps } from '../../api/api';
export default {
  name: 'list',
  components: {
    CommonBar
  },
  data() {
    return {
      requestParams: {},
      apps: [],
      toolBar: {
        // toolBar - options
        options: {
          width: '24',
          isDisabled: false,
          clearble: true
        },
        // toolBar - rows
        rows: [
          {
            items: [
              {
                type: 'select',
                width: 160,
                label: '',
                labelWidth: 0,
                placeholder: this.$t('placeholder.appCategory'),
                options: [],
                value: '',
                handleSelectChange: value => {
                  this.requestParams.type = value;
                  this.getApps();
                }
              },
              {
                type: 'select',
                width: 160,
                label: '',
                labelWidth: 0,
                placeholder: this.$t('placeholder.appStatus'),
                options: [
                  { label: this.$t('appStatus[1]'), value: 1 },
                  { label: this.$t('appStatus[2]'), value: 2 },
                  { label: this.$t('appStatus[3]'), value: 3 }
                ],
                value: '',
                handleSelectChange: value => {
                  this.requestParams.status = value;
                  this.getApps();
                }
              },
              {
                type: 'text',
                width: 200,
                label: '',
                labelWidth: 0,
                placeholder: this.$t('placeholder.name'),
                value: '',
                icon: '',
                handleTextInput: value => {
                  this.requestParams.name = value;
                  this.getApps();
                },
                handleTextBlur: value => {
                  console.info(value);
                },
                handleTextClear: value => {
                  this.requestParams.name = value;
                  this.getApps();
                }
              }
            ]
          }
        ],
        buttons: [
          {
            label: this.$t('btnText.addApp'),
            type: 'primary',
            isShow: 'true',
            permission: 'ams:platformApp:add',
            handleButtonClick: () => {
              this.$emit('toChangeComponentName', 'add');
            }
          }
        ]
      }
    };
  },
  watch: {
    '$store.getters.language': {
      handler(n, o) {
        if (n) {
          this.toolBar.rows[0].items[0].placeholder = this.$t('placeholder.appCategory');
          this.toolBar.rows[0].items[1].placeholder = this.$t('placeholder.appStatus');
          this.toolBar.rows[0].items[2].placeholder = this.$t('placeholder.name');
          this.toolBar.buttons[0].label = this.$t('btnText.addApp');
          this.requestParams.language = this.$store.getters.language;
          this.getApps();
        }
      },
      immediate: true
    }
  },
  created() {
    this.getCategorys();
    this.getApps();
  },
  computed: {
    appStatus() {
      return { color: { 1: 'info', 2: 'success', 3: 'warning' }, text: this.$t('appStatus') };
    }
  },
  methods: {
    iconStyle(color) {
      return 'color:' + color;
    },
    getCategorys() {
      let appCategorys = [];
      getCategorys({}).then(res => {
        for (let item of res.data) {
          let obj = {
            label: item.name,
            value: item.name
          };
          appCategorys.push(obj);
        }
      });
      this.toolBar.rows[0].items[0].options = appCategorys;
    },
    getApps() {
      getApps(this.requestParams).then(res => {
        this.apps = res.data || [];
      });
    },
    viewDetail(item) {
      this.$emit('toChangeComponentName', 'detail');
      this.$emit('toChangeTarget', item.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-empty {
  width: 100%;
}
.ht100 {
  height: 100%;
}
.mb20 {
  margin-bottom: 20px;
}
.main-box {
  overflow: auto;
  height: calc(100% - 65px - 20px);
}
.card-box {
  display: inline-block;
  width: 333.33px;
  height: 114px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #606266;
}
::v-deep .el-card .el-card__body {
  padding: 15px;
}
.media-box {
  display: flex;
}
.icon-box {
  width: 84px;
  height: 84px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
}
.icon-box > i {
  font-size: 44px;
}
.text-box {
  width: calc(100% - 84px);
  height: 100%;
}
.text-box .text-item {
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
}
.text-box .text-title {
  font-size: 16px;
  margin-right: 10px;
}
.text-box .text-title ::v-deep .el-link--inner {
  display: inline-block;
  overflow: hidden;
  max-width: 125px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-item .item-label {
  color: #909399;
  vertical-align: top;
}
.text-item .item-content {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  max-width: 125px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
